<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>4. CSS Tutorial</title>
		<link rel="stylesheet" type="text/css" href="styles.css" />
	</head>
	<body>
		<div id="container">
			<div id="left-side">
				<div id="home"></div>
					<h2 class="style">
						<a href="#">HOME</a>
					</h2>
				<ul class="navi">
					<li>
						<span class="red">CSS Basic</span>
					</li>
					<li>
						<a href="#">CSS Introduction</a>
					</li>
					<li>
						<a href="#">CSS Syntax</a>
					</li>
					<li>
						<a href="#">CSS How to</a>
					</li>
					<li>
						<a href="#">CSS Background</a>
					</li>
					<li>
						<a href="#">CSS Text</a>
					</li>
					<li>
						<a href="#">CSS Font</a>
					</li>
					<li>
						<a href="#">CSS Border</a>
					</li>
					<li>
						<a href="#">CSS Outline</a>
					</li>
					<li>
						<a href="#">CSS Margin</a>
					</li>
					<li>
						<a href="#">CSS Padding</a>
					</li>
					<li>
						<a href="#">CSS List</a>
					</li>
					<li>
						<a href="#">CSS Table</a>
					</li>
				</ul>
				<ul class="navi">
					<li>
						<span class="red">CSS Advanced</span>
					</li>
					<li>
						<a href="#">CSS Dimension</a>
					</li>
					<li>
						<a href="#">CSS Classification</a>
					</li>
					<li>
						<a href="#">CSS Positioning</a>
					</li>
					<li>
						<a href="#">CSS Pseudo-class</a>
					</li>
					<li>
						<a href="#">CSS Pseudo-element</a>
					</li>
					<li>
						<a href="#">CSS Image Gallery</a>
					</li>
					<li>
						<a href="#">CSS Image Opacity</a>
					</li>
					<li>
						<a href="#">CSS Media Types</a>
					</li>
					<li>
						<a href="#">CSS Don't</a>
					</li>
					<li>
						<a href="#">CSS Summary</a>
					</li>
				</ul>
				<ul class="navi">
					<li>
						<span class="red">CSS Examples</span>
					</li>
					<li>
						<a href="#">CSS Examples</a>
					</li>
				</ul>
				<ul class="navi">
					<li>
						<span class="red">CSS References</span>
					</li>
					<li>
						<a href="#">CSS Reference</a>
					</li>
					<li>
						<a href="#">CSS Print</a>
					</li>
					<li>
						<a href="#">CSS Aural</a>
					</li>
					<li>
						<a href="#">CSS Units</a>
					</li>
					<li>
						<a href="#">CSS Colors</a>
					</li>
					<li>
						<a href="#">CSS Colorvalue</a>
					</li>
					<li>
						<a href="#">CSS Colornames</a>
					</li>
				</ul>
				<ul class="navi">
					<li>
						<span class="red">CSS Quiz</span>
					</li>
					<li>
						<a href="#">CSS Quiz</a>
					</li>
					<li>
						<a href="#">CSS Exam</a>
					</li>
				</ul>
				<ul class="navi">
					<li>
						<span class="red">CSS3 Tutorials</span>
					</li>
					<li>
						<a href="#">CSS3 Syntax</a>
					</li>
					<li>
						<a href="#">CSS Reference</a>
					</li>
					<li>
						<a href="#">CSS Margin</a>
					</li>
					<li>
						<a href="#">CSS Padding</a>
					</li>
					<li>
						<a href="#">CSS Text</a>
					</li>
					<li>
						<a href="#">CSS Colors</a>
					</li>
					<li>
						<a href="#">CSS Border</a>
					</li>
					<li>
						<a href="#">CSS Background</a>
					</li>
					<li>
						<a href="#">CSS3 Examples </a>
					</li>
					<li>
						<a href="#">CSS Tutorials</a>
					</li>
				</ul>
			</div>
			<div id="right-side">
				<h3>SITE SEARCH</h3>
					<form id="form-style" method="get" name="searchform" 
						action="http://www.google.com/search" target="_blank">
						<input type="hidden" name="sitesearch" value="www.w3schools.com"/>
						<input id="input-style" 
							type="text" name="site_search" size="30" value="Search w3schools.com"/>
						<input type="submit" id="round" value="..." title="..." />
					</form>
				<div>
					<ul class="navi3">
						<li>
							<a href="#">About W3Schools</a>
						</li>
						<li>
							<a href="#">W3Schools Forum</a>
						</li>
					</ul>
					<div>
						<input type="button" id="buton" name="button" 
						onClick="sample();" value="Call javascript function" />
					</div>
					<ul class="navi3">
						<li>
							<a href="#">Dynamic button image</a>
						</li>
						<li>
							<a href="#">generation</a>
						</li>
					</ul>
					<h3>Web Hosting</h3>
					<ul class="navi3">
						<li>
							<a href="#">$15 Domain name</a>
						</li>
						<li>
							<a href="#">Registration</a>
						</li>
						<li>
							<a href="#">Save $20 / year!</a>
						</li>
					</ul>
					<ul class="navi3">
						<li>
							<a href="#">UK Domain names</a>
						</li>
						<li>
							<a href="#">UK Web hosting</a>
						</li>
						<li>
							<a href="#">Alpiamiento web</a>
						</li>
					</ul>
					<ul class="navi3">	
						<li>
							<a href="#">Buy UK Domain Names</a>
						</li>
						<li>
							<a href="#">Register Domain Names</a>
						</li>
					</ul>
					<ul class="navi3">
						<li>
							<a href="#">Cheap Domain Names</a>
						</li>
						<li>
							<a href="#">Cheap Web Hosting</a>
						</li>
					</ul>
					<ul class="navi3">
						<li>
							<a href="#">Best Web Hosting</a>
						</li>
					</ul>
					<ul class="navi3">
						<li>
							<a href="#">Domain name</a>
						</li>
						<li>
							<a href="#">Registration</a>
						</li>
					</ul>
					<ul class="navi3">
						<li>
							<a href="#">PHP MySQL Hosting</a>
						</li>
					</ul>
					<ul class="navi3">
						<li>
							<a href="#">Top 10 Web Hosting</a>
						</li>
					</ul>
					<ul class="navi3">
						<li>
							<a href="#">Web Hosting Providers</a>
						</li>
					</ul>
					<ul class="navi3">
						<li>
							<a href="#">Web Hosting Company</a>
						</li>
					</ul>
					<ul class="navi3">
						<li>
							<a href="#">Web Hosting Reviews</a>
						</li>
					</ul>
					<ul class="navi3">
						<li>
							<a href="#">UK Web hosting</a>
						</li>
					</ul>
				</div>
			</div>
			<div id="center">
				<h1>CSS Tutorial</h1>
					<input name="textfield" class="left-arrow" type="text" value="&#9668;Previous" />
					<input name="textfield2" class="right-arrow" type="text" value="Next&#9658;" />
				<hr />
				<div>
					<h3>CSS Tutorial</h3>
					<div class="logo"></div>
					<div class="right-position">Save a lot of work with CSS!<br />
						In your CSS tutorial you will learn how to use CSS to 
						control the style and the layout of multiplle Web pages all at once.
					</div>
					<ul class="navi2">
						<li>
							<a href="http://www.oreilly.com/">Start learning the CSS!</a>
						</li>
					</ul>
				</div>
				<div>
					<h3>CSS Examples</h3>
					<div>
						Learn by 70 examples with our editor, you can edit CSS, and click on a test button
						to view the result.
					</div>
					<ul class="navi2">
						<li>
							<a href="#"><img id="book-style" src="image/icon-book.gif" alt="image" />Try-It-Yourself!</a>
						</li>
					</ul>
				</div>
				<div>
					<h3>CSS Reference</h3>
					<div>
						At W3Schools you will find a complete CSS3 reference, listing properties, units of 
						measurements, colors and more.
					</div>
					<ul class="navi2">
						<li>
							<a href="http://www.oreilly.com/"
								onMouseOver="window.status = 
									'Click here to see the catalog page';
									return true;"
								onMouseOut="window.status = '';">
							<img id="oreilly" src="http://akamaicovers.oreilly.com/images/9781449325947/thumb.gif" alt="CSS3: The Missing Manual" title="" /></a>
						</li>
						<li>
							<a href="http://www.oreilly.com/">Start learning the CSS3!</a>
						</li>
					</ul>
				</div>
				<div>
					<h3>CSS Quiz Test</h3>
					<div>Test your CSS skills at W3Schools!</div>
					<ul class="navi2">
						<li>
							<a href="#">Start CSS Quiz!</a>
						</li>
					</ul>
				</div>	
				<hr />
					<input name="textfield" class="left-arrow" type="text" value="&#9668;Previous" />
					<input name="textfield2" class="right-arrow" type="text" value="Next&#9658;" />
				<hr />
				<p>
					<a href="http://validator.w3.org/">
						<img id="html-style" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" />
					</a>
				</p>
				<p>
					<a href="http://jigsaw.w3.org/css-validator">
						<img id="css-style" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" />
					</a>
				</p>
			</div>		
		</div>
	</body>
</html>